<!--餐柜详情-->
<template>
    <div class="detail">
         <!--1-->
        <el-row class="nav_a_top">
            <el-col :span="24"><div class="grid-content bg-purple">餐柜详情</div></el-col>
        </el-row>
        <div class="cangmar">仓格状态</div>
        <!--2-->
        <div class="cangge_state">
            <div class="cangge_state_one">
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
            </div>
            <div class="cangge_state_one">
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
            </div>
            <div class="cangge_state_one">
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
            </div>
            <div class="cangge_state_one">
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
                <div><div>001柜</div></div>
            </div>
           <div class="cangge_state_two">
                <span class="cangge_state_marright">设置编号</span>
                <span class="cangge_state_marright1"></span>
                <span class="cangge_state_marright">空柜</span>
                <span class="cangge_state_marright1"></span>
                <span class="cangge_state_marright">有物</span>
           </div>
        </div>
        <!--3-->
        <div  class="cangmar">订单信息</div>
        <table class="detail_table">
            <tr>
                <td>流水号</td>
                <td>商品名</td>
                <td>订单金额</td>
                <td>支付方式</td>
                <td>时间</td>
                <td>厨房名称</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>2017110211111</td>
                <td>黄焖鸡米饭*1</td>
                <td>15.00元</td>
                <td>微信支付</td>
                <td>2017-09-12 16：20</td>
                <td>美地</td>
                <td>成功</td>
                <td>暂无操作</td>
            </tr>
            <tr>
                <td>2017110211111</td>
                <td>黄焖鸡米饭*1</td>
                <td>15.00元</td>
                <td>微信支付</td>
                <td>2017-09-12 16：20</td>
                <td>美地</td>
                <td>成功</td>
                <td>暂无操作</td>
            </tr>
            <tr>
                <td>2017110211111</td>
                <td>黄焖鸡米饭*1</td>
                <td>15.00元</td>
                <td>微信支付</td>
                <td>2017-09-12 16：20</td>
                <td>美地</td>
                <td>成功</td>
                <td>暂无操作</td>
            </tr>
            <tr>
                <td>2017110211111</td>
                <td>黄焖鸡米饭*1</td>
                <td>15.00元</td>
                <td>微信支付</td>
                <td>2017-09-12 16：20</td>
                <td>美地</td>
                <td>成功</td>
                <td>暂无操作</td>
            </tr>
        </table>
    </div>
</template>
<script>
    export default{
        name:'detail',
        data(){
            return{

            }
        },

    }
</script>
<style>
/*1*/
.nav_a_top{height: 40px;background-color: white;padding: 10px 10px 0px 10px;}
.cangmar{margin: 15px 0px;}
/*2*/
.cangge_state{height:340px;width: 100%;padding: 65px;background-color: white;border: 1px solid #bbbbbb;}
.cangge_state>div{height: 25%;width: 100%;}
.cangge_state_one>div{width: 10.8%;display: inline-block;height: 100%;margin: 0px;position: relative;}
.cangge_state_one div div{width: 85px;height: 30px;border: 1px solid #bbbbbb;text-align: center;position: absolute;top: 11px;left: 35px;line-height: 30px;}
.cangge_state_two{text-align: right;margin-top: 20px;}
.cangge_state_two>span{display: inline-block;}
.cangge_state_two>span:nth-child(1){width: 85px;height: 30px;border: 1px solid #bbb;line-height: 30px;text-align: center;border-radius:5px;}
.cangge_state_two>span:nth-child(2){height: 22px;width: 22px;background-color: #454646;border-radius:3px;position: relative;top: 4px;}
.cangge_state_two>span:nth-child(4){height: 22px;width: 22px;border: 1px solid #454646;border-radius:3px;position: relative;top: 4px;}
.cangge_state_marright{margin-right: 28px;}
.cangge_state_marright1{margin-right: 3px;}
/*3*/
.detail_table>tr:nth-child(1){background-color:#cdcdcd;}
.detail_table{background-color: white;width: 100%;}
.detail_table tr{height: 50px;}
.detail_table td{height: 50px;border: 1px solid #bbb;text-align: center;}
</style>
